<template>
    <div class="table-container">
        <div class="table-breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>员工列表</el-breadcrumb-item>
                <el-breadcrumb-item>员工编辑</el-breadcrumb-item>
            </el-breadcrumb>
            </div>
            <div class="table-search">
            <el-row>
                <el-button type="success" @click="toBack" >返回</el-button>
            </el-row>
        </div>
        <div class="content">
            <h3>基本信息</h3>
            <el-form>
                <el-form-item label="工号" label-width="90px">
                    <el-input type="text" v-model="dataInfo.id" readonly></el-input>
                </el-form-item>
                <el-form-item label="姓名" label-width="90px">
                    <el-input type="text" v-model="dataInfo.name" readonly></el-input>
                </el-form-item>
                <!-- <el-form-item label="微信号" label-width="90px">
                    <el-input type="text" v-model="dataInfo" readonly></el-input>
                </el-form-item> -->
                <el-form-item label="手机号" label-width="90px">
                    <el-input type="text" v-model="dataInfo.mobile" readonly></el-input>
                </el-form-item>
                <el-form-item label="员工账号" label-width="90px">
                    <el-input type="text" v-model="dataInfo.userid" readonly></el-input>
                </el-form-item>
                <!-- <el-form-item label="企业微信号" label-width="90px">
                    <el-input type="text" v-model="dataInfo" readonly></el-input>
                </el-form-item> -->
            </el-form>
        </div>
        <div class="table-content">
            <h3>客户</h3>
            <el-table
                border
                empty-text="当前数据空空如也"
                ref="multipleTable"
                :data="offerList"
                tooltip-effect="dark"
                style="width: 100%"
                @select="selectedRow"
                @select-all="selectedAll"
            >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="id" label="序号" width="100"></el-table-column>
                <!-- <el-table-column prop="room_type" label="工号" width="100"></el-table-column> -->
                <!-- <el-table-column prop="id" label="企业微信号" width="auto"></el-table-column> -->
                <el-table-column prop="external_data.name" label="客户名" width="auto"></el-table-column>
                <!-- <el-table-column prop="username" label="微信号" width="auto"></el-table-column> -->
                <!-- <el-table-column prop="mobile" label="手机号" width="auto"></el-table-column> -->
                <el-table-column prop="create_time" label="添加时间" width="auto" :formatter="changeTime"></el-table-column>
                <!-- <el-table-column label="操作" fixed="right">
                <template slot-scope="scope">
                    <el-button slot="reference" @click="delOffer(scope.$index, scope.row)" type="danger" size="mini">删除</el-button>
                </template>
                </el-table-column> -->
            </el-table>
            <div class="page-nav">
                <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-sizes="[10, 20, 30, 50,100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
        </div>
        
    </div>
</template>
<script>
export default {
    data(){
        return{
            page: 1,
            pageSize: 10,
            total: 0,
            dataInfo:{},
            radio:'1',
            multipleSelection: [],
            offerList:[]
        }
    },
    mounted() {
        let data = this.$route.query.data
        this.dataInfo = JSON.parse(decodeURIComponent(data))
        console.log(this.dataInfo,'++++');
        this.getCustomer()
    },
    methods: {
        // 返回按钮
        toBack(){
            this.$router.back(1)
        },

        //时间
        changeTime(row, column, cellValue, index){
            if(cellValue){
                return this.$moment(cellValue*1000).format('yyyy-MM-DD')
            }else{
                return ''
            }
        },

        // 获取客户列表
        getCustomer(){
            let params = {
                page:this.page,
                pagesize:this.pageSize,
                qy_user_id:this.dataInfo.qy_wechat_id
            }
            this.$http.post('/api/admin/qywx/Index/getCustomerList',params).then(res=>{
                console.log(res,'客户列表');
                if(res.code==1){
                    this.offerList = res.data.data?res.data.data:[]
                    this.total = res.data.count
                }
            })
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.page = 1;
            this.getCustomer()
        },
        handleCurrentChange(val) {
            this.page = val;
            this.getCustomer();
        },
        
        selectedRow(selection, row) {
            this.multipleSelection = [];
            const _ths = this;
            selection.map(function (item) {
                _ths.multipleSelection.push(item.id);
            })
        },
        selectedAll(rows) {
            if (rows.length === 0) {
                this.multipleSelection = [];
            } else {
                const _ths = this;
                rows.map(function (item) {
                    if (!_ths.multipleSelection.includes(item.id)) {
                    _ths.multipleSelection.push(item.id);
                    }
                })
            }
        },
    },
}
</script>
<style lang="less" scoped>
@import 'detail.less';
</style>

